<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>${message("admin.schemeProduct.add")} - 766 SMART HOME</title>
<meta name="author" content="BIZ Team" />
<meta name="copyright" content="BIZ" />
<link href="${base}/resources/admin/css/common.css" rel="stylesheet" type="text/css" />
<style type="text/css">
	.specificationSelect {
		height: 100px;
		padding: 5px;
		overflow-y: scroll;
		border: 1px solid #cccccc;
	}
	
	.specificationSelect li {
		float: left;
		min-width: 150px;
		_width: 200px;
	}
</style>
</head>
<body>
	<div class="path">
		<a href="${base}/admin/common/index.jhtml">${message("admin.path.index")}</a> &raquo; ${message("admin.schemeProduct.add")}
	</div>
	<form id="inputForm" action="save.jhtml" method="post">
		<ul id="tab" class="tab">
			<li>
				<input type="button" value="${message("admin.product.base")}" />
			</li>
			<li>
				<input type="button" value="主材规格" />
			</li>
		</ul>
		<table class="input tabContent">
			<tr>
				<th>
					<span class="requiredField">*</span>类型:
				</th>
				<td>
					<select name="type" class="option">
						<option value="">请选择</option>
						[#list types as type]
							<option value="${type.id}">${type.title}</option>
						[/#list]
					</select>
				</td>
			</tr>
			<tr>
				<th>
					<span class="requiredField">*</span>分类:
				</th>
				<td>
					<select name="category" class="option">
						<option value="">请选择</option>
					</select>
				</td>
			</tr>
			<tr>
				<th>
					<span class="requiredField">*</span>主材名称:
				</th>
				<td>
					<select name="nameId" class="option">
						<option value="">请选择</option>
					</select>
				</td>
			</tr>
			<tr>
				<th>
					<span class="requiredField">*</span>品牌:
				</th>
				<td>
					<select name="brand" class="option">
						<option value="">请选择</option>
						[#list brands as brand]
							<option value="${brand.id}">${brand.name}</option>
						[/#list]
					</select>
				</td>
			</tr>
			<tr>
				<th>
					<span class="requiredField">*</span>价格:
				</th>
				<td>
					<input type="text" name="price" class="text" maxlength="16" />
				</td>
			</tr>
            <tr>
                <th>
                    <span class="requiredField">*</span>热值:
                </th>
                <td>
                    <input type="number" name="heatValue" class="text" maxlength="16" />
                </td>
            </tr>
            <tr>
                <th>
                    <span class="requiredField">*</span>排序权重:
                </th>
                <td>
                    <input type="text" name="sortWeight" class="text" maxlength="16" />
                </td>
            </tr>
			<tr>
				<th>
					<span class="requiredField"></span>是否特惠:
				</th>
				<td>
					<label><input type="checkbox" name="isTehui" value="false"/>是</label>
				</td>
			</tr>
			<tr>
				<th>
					<span class="requiredField"></span>是否提点产品:
				</th>
				<td>
					<label><input type="checkbox" name="isReward" value="false"/>是</label>&nbsp;&nbsp<span>(方案主机部分才能作为提成点产品，如:暖通方案的壁挂炉，空调方案的室外机)</span>
				</td>
			</tr>
			<tr>
				<th>
					<span class="requiredField">*</span>展示图片:
				</th>
				<td>
					<span class="fieldSet">
						<input type="text" name="image" class="text" readonly="true" maxlength="200" title="用于方案产品的图片展示" />
						<input type="button" id="browserButton" class="button" value="${message("admin.browser.select")}" />
					</span>
				</td>
			</tr>
		</table>
		<table class="input tabContent">
			<tr class="title">
				<th>
					<span class="requiredField">*</span>请选择主材规格:
				</th>
			</tr>
			<tr>
				<td>
					<div id="specificationSelect" class="specificationSelect">
						<ul>
							[#list specifications as specification]
								<li>
									<label title="${specification.name}">
										<input type="radio" name="specificationIds" value="${specification.id}" />${abbreviate(specification.name,18,"...")}
										<input type="hidden" class="classSpecification" value="${specification.name}"/>
									</label>
								</li>
							[/#list]
						</ul>
					</div>
				</td>
			</tr>
			<tr>
				<td>
					<a href="javascript:;" id="addSpecificationProduct" class="button">${message("admin.product.addSpecificationProduct")}</a>
				</td>
			</tr>
			<tr>
				<td>
					<table id="specificationProductTable" class="input">
						<tr class="title">
							<td width="60">
								&nbsp;
							</td>
							<td id="specificationNameTd" width="50%;">
								
							</td>
							<td>
								${message("admin.common.handle")}
							</td>
						</tr>
						<tr class="hidden">
							<td>
								&nbsp;
							</td>
							[#list specifications as specification]
								<td class="specification_${specification.id} hidden">
									<select name="specification_${specification.id}" disabled="disabled">
										[#list specification.specificationValues as specificationValue]
											<option value="${specificationValue.id}">${specificationValue.name}</option>
										[/#list]
									</select>
								</td>
							[/#list]
							<td>
								<a href="javascript:;" class="deleteSpecificationProduct">[${message("admin.common.delete")}]</a>
							</td>
						</tr>
					</table>
				</td>
			</tr>
		</table>
		<table class="input">
			<tr>
				<th>
					&nbsp;
				</th>
				<td>
					<input type="submit" class="button" value="保存" />
					<input type="button" class="button" value="返回" onclick="window.location.href='list.jhtml'" />
				</td>
			</tr>
		</table>
	</form>
</body>
</html>
<script type="text/javascript" src="${base}/resources/admin/js/jquery.js"></script>
<script type="text/javascript" src="${base}/resources/admin/js/jquery.tools.js"></script>
<script type="text/javascript" src="${base}/resources/admin/js/jquery.validate.js"></script>
<script type="text/javascript" src="${base}/resources/admin/js/common.js"></script>
<script type="text/javascript" src="${base}/resources/admin/js/input.js"></script>
<script type="text/javascript" src="${base}/resources/admin/js/scheme.js"></script>
<script type="text/javascript">
$().ready(function() {
	
	[@flash_message /]
	
	var $inputForm = $("#inputForm");
	var $browserButton = $("#browserButton");
	var $type = $("select[name='type']");
	var $category = $("select[name='category']");
	var $nameId = $("select[name='nameId']");
	var $specificationIds = $("#specificationSelect :radio");
	var $specificationProductTable = $("#specificationProductTable");
	var $addSpecificationProduct = $("#addSpecificationProduct");
	var $deleteSpecificationProduct = $("a.deleteSpecificationProduct");
	var $specificationNameTd = $("#specificationNameTd");
	var $isTehui = $("input[name='isTehui']");
	var $isReward = $("input[name='isReward']");
	var $cache = "";
	
	//选择图片弹出框
	$browserButton.browser();
	
	$isTehui.click(function(){
		if($isTehui.prop("checked")){
			$isTehui.val(true);			
		}else{
			$isTehui.val(false);
		}
	});
	$isReward.click(function(){
		if($isReward.prop("checked")){
			$isReward.val(true);			
		}else{
			$isReward.val(false);
		}
	});
	
	// 表单验证
	$inputForm.validate({
		rules: {
			type: "required",
			nameId: "required",
			category:"required",
			price: {
				required: true,
				pattern:/^(?!00)(?!0.$)(?!0.0$)(?!0.00$)[0-9]+[.]?[0-9]{0,2}$/,
				maxlength:12,
				minlength:1
			},
            heatValue:"required",
            sortWeight:"required",
			brand: "required",
			specificationIds: "required",
			image: "required"
		},
		messages: {
			nameId: {
				required: "${message("admin.validate.required")}",
			},
			type: {
				required: "${message("admin.validate.required")}",
			},
			category: {
				required: "${message("admin.validate.required")}",
			},
			price: {
				required: "${message("admin.validate.required")}",
				pattern:"请输入正确格式的价格"
			},
			brand: {
				required: "${message("admin.validate.required")}",
			},
			specificationIds: {
				required: "${message("admin.validate.required")}",
			},
			image: {
				required: "${message("admin.validate.required")}",
			}
		},
	});
	
	// 修改商品规格
	$specificationIds.click(function() {
		if ($specificationIds.filter(":checked").size() == 0) {
			$specificationProductTable.find("tr:gt(1)").remove();
		}
		var $this = $(this);
		var $parent = $this.parent();
		var $val = $parent.find(".classSpecification");
		if($cache != null && $cache != ""){
			$specificationProductTable.find("td.specification_" + $cache).hide().find("select").prop("disabled", true);			
		}
		$cache = $this.val();
		if ($this.prop("checked")) {
			$specificationNameTd.html($val.val());
			$specificationProductTable.find("td.specification_" + $this.val()).show().find("select").prop("disabled", false);
		}
	});
	
	// 增加规格商品
	$addSpecificationProduct.click(function() {
		if ($specificationIds.filter(":checked").size() == 0) {
			$.message("warn", "${message("admin.product.specificationRequired")}");
			return false;
		}
		if ($specificationProductTable.find("tr:gt(1)").size() == 0) {
			$tr = $specificationProductTable.find("tr:eq(1)").clone().show().appendTo($specificationProductTable);
			$tr.find("td:first").text("${message("admin.product.currentSpecification")}");
			$tr.find("td:last").text("-");
		} else {
			$specificationProductTable.find("tr:eq(1)").clone().show().appendTo($specificationProductTable);
		}
	});
	
	// 删除规格商品
	$deleteSpecificationProduct.live("click", function() {
		var $this = $(this);
		$.dialog({
			type: "warn",
			content: "${message("admin.dialog.deleteConfirm")}",
			onOk: function() {
				$this.closest("tr").remove();
			}
		});
	});
	
		
	//根据类型查询分类
	$type.change(function(){
		var type = $type.val();
		if(type == null || type == ""){
			$.message("warn","请先选择类型！");
			$category.empty();
			$nameId.empty();
			$category.append("<option value=''>请选择</option>");
			$nameId.append("<option value=''>请选择</option>");
			return false;
		}
		findSchemeProductCategory(type,'${base}');
	});
	
	$category.change(function(){
		var category = $category.val();
		if(category == null || category == ""){
			$.message("warn","请先选择分类！");
			$nameId.empty();
			$nameId.append("<option value=''>请选择</option>");
			return false;
		}
		findSchemeProductNames(category,'${base}');
	});
	
});
</script>